<!--  -->
<template>
  <div id="">
    <div class="recommend_warp">
      <div class="recommend_item" v-for="item in recommend" :key="item.link">
        <a :href="item.link">
          <div class="img_warp">
            <img :src="item.image" alt="" />
          </div>
          <div>{{ item.title }}</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    recommend: {
      type: Array,
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {},
};
</script>
<style lang="less" scoped>
//@import url();
.recommend_warp {
  display: flex;
  padding: 10px 0;
border-bottom: 5px solid #eeecee;
  .recommend_item {
    flex: 1;
    text-align: center;
    a {
      color: #8e8d8f;
      text-decoration: none;
      font-size: 14px;
      .img_warp {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
        img {
          width: 80%;
        }
      }
    }
  }
}
</style>
